/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: .5s;
  transition-timing-function: linear;
  padding: ($header-xs-height - $hamburger-height) / 2 ($header-xs-height - $hamburger-width) / 2;
}

.hamburger:hover {
  opacity: 1;
}

.hamburger-box {
  position: relative;
  width: $hamburger-width;
  height: $hamburger-height;
}

.hamburger-inner {
  top: 50%;
  margin-top: -1 * $hamburger-bar-height;

  &:before,
  &:after {
    content: "";
    display: block;
  }

  &,
  &:before,
  &:after {
    width: 100%;
    height: $hamburger-bar-height;
    background-color: $color-text;
    border-radius: 0;
    position: absolute;
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: ease;
  }

  &:before {
    top: -1 * $hamburger-bar-gutter;
  }

  &:after {
    bottom: -1 * $hamburger-bar-gutter;
  }
}

.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner:before {
  transition: top 0.1s 0.14s ease, opacity 0.1s ease;
}

.hamburger--squeeze .hamburger-inner:after {
  transition: bottom 0.1s 0.14s ease,transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.14s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner:before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease, opacity 0.1s 0.14s ease;
}

.hamburger--squeeze.is-active .hamburger-inner:after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease,transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.nav__toggle {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2001;
}

@include respond(xs) {
  .nav__toggle {
    display: inline-block;
  }
}

// Github Octo
.github-corner {
  display: none;
}

@include respond(lg) {
  .github-corner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2001;
    width: $github-octo-width;
    border: none;
    color: $color-white;
    transform: scale(-1, 1);
  
    &:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out;
    }
  
    @include anim(octocat-wave) {
      0%, 100% {
        transform: rotate(0);
      }
  
      20%, 60% {
        transform: rotate(-25deg);
      }
  
      40%, 80% {
        transform: rotate(10deg);
      }
    }
  }
}

// ScrollTop
.scroll-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  color: $color-white;
  font-size: 18px;
  background-color: rgba($color-primary, .65);
  box-shadow: 0 1px 3px rgba($color-text,.1);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

// @include respond(md) {
//   *[data-title] {

//     &:before,
//     &:after {
//       position: absolute;
//       z-index: 10000;
//       opacity: 0;
//       visibility: hidden;
//       pointer-events: none;
//       transform: translate3d(-50%, 0, 0);
//       transition: $transition;
//       transition-delay: 0s;
//     }

//     &:before {
//       content: attr(data-title);
//       top: calc(#{-1em * $tooltip-line-height} - #{$tooltip-y-padding * 2} - #{$tooltip-arrow-width});
//       left: 50%;
//       padding: $tooltip-y-padding $tooltip-x-padding;
//       line-height: $tooltip-line-height;
//       // border-radius: $border-radius-base;
//       background-color: $tooltip-fill-color;
//       color: $color-white;
//       font-size: 12px;
//       white-space: nowrap;
//       box-sizing: content-box;
//     }

//     &:after {
//       content: "\20";
//       top: -1 * $tooltip-arrow-width;
//       left: 50%;
//       border: $tooltip-arrow-width solid transparent;
//       border-top-color: $tooltip-fill-color;
//     }

//     &:hover {
//       &:before,
//       &:after {
//         opacity: 1;
//         visibility: visible;
//         transform: translate3d(-50%, -6px, 0);
//         transition-delay: .1s;
//       }
//     }
//   }
// }

@include respond(md) {
  /*! Hint.css (base version) - v2.6.0 - 2019-04-27
  * http://kushagragour.in/lab/hint/
  * Copyright (c) 2019 Kushagra Gour */
  [class*=hint--] {
    display: inline-block;
  }

  [class*=hint--]:after,[class*=hint--]:before {
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    transition-delay: 0s
  }

  [class*=hint--]:hover:after,[class*=hint--]:hover:before {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    transition-delay: .1s
  }

  [class*=hint--]:before {
    content: '';
    position: absolute;
    background: 0 0;
    border: 6px solid transparent;
    z-index: 1000001
  }

  [class*=hint--]:after {
    background: #383838;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap
  }

  [class*=hint--][aria-label]:after {
    content: attr(aria-label)
  }

  [class*=hint--][data-hint]:after {
    content: attr(data-hint)
  }

  [aria-label='']:after,[aria-label='']:before,[data-hint='']:after,[data-hint='']:before {
    display: none!important
  }

  .hint--top-left:before,.hint--top-right:before,.hint--top:before {
    border-top-color: #383838
  }

  .hint--bottom-left:before,.hint--bottom-right:before,.hint--bottom:before {
    border-bottom-color: #383838
  }

  .hint--top:after,.hint--top:before {
    bottom: 100%;
    left: 50%
  }

  .hint--top:before {
    margin-bottom: -11px;
    left: calc(50% - 6px)
  }

  .hint--top:after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .hint--top:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--top:hover:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px)
  }

  .hint--bottom:after,.hint--bottom:before {
    top: 100%;
    left: 50%
  }

  .hint--bottom:before {
    margin-top: -11px;
    left: calc(50% - 6px)
  }

  .hint--bottom:after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .hint--bottom:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--bottom:hover:after {
    -webkit-transform: translateX(-50%) translateY(8px);
    -moz-transform: translateX(-50%) translateY(8px);
    transform: translateX(-50%) translateY(8px)
  }

  .hint--right:before {
    border-right-color: #383838;
    margin-left: -11px;
    margin-bottom: -6px
  }

  .hint--right:after {
    margin-bottom: -14px
  }

  .hint--right:after,.hint--right:before {
    left: 100%;
    bottom: 50%
  }

  .hint--right:hover:after,.hint--right:hover:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px)
  }

  .hint--left:before {
    border-left-color: #383838;
    margin-right: -11px;
    margin-bottom: -6px
  }

  .hint--left:after {
    margin-bottom: -14px
  }

  .hint--left:after,.hint--left:before {
    right: 100%;
    bottom: 50%
  }

  .hint--left:hover:after,.hint--left:hover:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px)
  }

  .hint--top-left:after,.hint--top-left:before {
    bottom: 100%;
    left: 50%
  }

  .hint--top-left:before {
    margin-bottom: -11px;
    left: calc(50% - 6px)
  }

  .hint--top-left:after {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    margin-left: 12px
  }

  .hint--top-left:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--top-left:hover:after {
    -webkit-transform: translateX(-100%) translateY(-8px);
    -moz-transform: translateX(-100%) translateY(-8px);
    transform: translateX(-100%) translateY(-8px)
  }

  .hint--top-right:after,.hint--top-right:before {
    bottom: 100%;
    left: 50%
  }

  .hint--top-right:before {
    margin-bottom: -11px;
    left: calc(50% - 6px)
  }

  .hint--top-right:after {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    margin-left: -12px
  }

  .hint--top-right:hover:after,.hint--top-right:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--bottom-left:after,.hint--bottom-left:before {
    top: 100%;
    left: 50%
  }

  .hint--bottom-left:before {
    margin-top: -11px;
    left: calc(50% - 6px)
  }

  .hint--bottom-left:after {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    margin-left: 12px
  }

  .hint--bottom-left:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--bottom-left:hover:after {
    -webkit-transform: translateX(-100%) translateY(8px);
    -moz-transform: translateX(-100%) translateY(8px);
    transform: translateX(-100%) translateY(8px)
  }

  .hint--bottom-right:after,.hint--bottom-right:before {
    top: 100%;
    left: 50%
  }

  .hint--bottom-right:before {
    margin-top: -11px;
    left: calc(50% - 6px)
  }

  .hint--bottom-right:after {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    margin-left: -12px
  }

  .hint--bottom-right:hover:after,.hint--bottom-right:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--large:after,.hint--medium:after,.hint--small:after {
    white-space: normal;
    line-height: 1.4em;
    word-wrap: break-word
  }

  .hint--small:after {
    width: 80px
  }

  .hint--medium:after {
    width: 150px
  }

  .hint--large:after {
    width: 300px
  }

  .hint--always:after,.hint--always:before {
    opacity: 1;
    visibility: visible
  }

  .hint--always.hint--top:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--always.hint--top:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px)
  }

  .hint--always.hint--top-left:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--always.hint--top-left:after {
    -webkit-transform: translateX(-100%) translateY(-8px);
    -moz-transform: translateX(-100%) translateY(-8px);
    transform: translateX(-100%) translateY(-8px)
  }

  .hint--always.hint--top-right:after,.hint--always.hint--top-right:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
  }

  .hint--always.hint--bottom:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--always.hint--bottom:after {
    -webkit-transform: translateX(-50%) translateY(8px);
    -moz-transform: translateX(-50%) translateY(8px);
    transform: translateX(-50%) translateY(8px)
  }

  .hint--always.hint--bottom-left:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--always.hint--bottom-left:after {
    -webkit-transform: translateX(-100%) translateY(8px);
    -moz-transform: translateX(-100%) translateY(8px);
    transform: translateX(-100%) translateY(8px)
  }

  .hint--always.hint--bottom-right:after,.hint--always.hint--bottom-right:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
  }

  .hint--always.hint--left:after,.hint--always.hint--left:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px)
  }

  .hint--always.hint--right:after,.hint--always.hint--right:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px)
  }

}